/* Variables */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@font-face {
  font-family: "Graphik Regular";
  src: url("Graphik-Regular-App.ttf");
}
@font-face {
  font-family: "Graphik Semibold";
  src: url("Graphik-Semibold-App.ttf");
}
@font-face {
  font-family: "GraphikWide Light";
  src: url("GraphikWide-Light-App.ttf");
}
@font-face {
  font-family: "GraphikWide Regular";
  src: url("GraphikWide-Regular-App.ttf");
}
@font-face {
  font-family: "GraphikWide Semibold";
  src: url("GraphikWide-Semibold-App.ttf");
}
h1, h2, h3, h4, h5, h6,
body {
  font-family: "GraphikWide Semibold";
}

.fw-bolder {
  color: #051E6E;
  font-size: 20px;
}

.fw-lighter {
  color: #051E6E;
  font-size: 14px;
  font-weight: lighter;
}

.page-headings h2 {
  color: #051E6E;
  margin-top: 0;
}
@media (max-width: 576px) {
  .page-headings h2 {
    font-size: 1.7em;
  }

  .page-headings h3 {
    color: #051E6E;
    font-size: 1.1em;
    margin-top: 0;
  }
}
.page-headings h5 {
  color: #051E6E;
  font-weight: normal;
  font-family: "Graphik Regular";
}
.page-headings a.page-heading-icon {
  padding: 0 5px;
  opacity: 50%;
}
.page-headings a.page-heading-icon.active,
.page-headings a.page-heading-icon:hover {
  color: #051E6E !important;
  opacity: 100%;
}

.text-muted {
  color: #051E6E !important;
  opacity: 50%;
  font-weight: lighter;
}

.text-dark {
  color: #051E6E !important;
  font-weight: bold;
}
.text-dark-blue {
  color: #051E6E !important;
}
.text-wide {
  font-family: "GraphikWide Semibold";
}

.btn {
  border-radius: 250px;
  font-family: "GraphikWide Semibold";
  white-space: nowrap;
}
.btn span {
  font-family: "GraphikWide Semibold";
}

.btn.extra-small {
  font-size: 12px !important;
  height: 22px !important;
  padding: 0px 10px 0px 10px !important;
}
.btn i {
  padding-right: 6px !important;
}

.btn:active {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA !important;
  border-color: #0555FA !important;
}

.btn-primary {
  background-color: #0555FA;
  color: white;
  border-color: #0555FA;
  font-weight: normal;
}

.btn-primary:hover {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA !important;
  border-color: #0555FA !important;
}

.btn-secondary {
  background-color: white;
  color: #0555FA;
  border-color: #0555FA !important;
  font-weight: normal;
}

.btn-secondary:hover {
  background-color: transparent !important;
  cursor: pointer !important;
  color: #0555FA !important;
}

.btn-secondary:disabled {
    color: #A19F9D;
    border: 2px solid #A19F9D !important;

}

.btn-default.bootstrap-table {
  border-color: transparent !important;
  color: #242424;
  background-color: transparent !important;
}

/* Tabbed Buttons */
.nav-link {
  font-size: 14px !important;
}
.nav-link span {
  font-size: 10px !important;
}

.nav-link.active span.badge {
  color: #0555FA;
  border-color: #0555FA !important;
}

.nav-link:hover span.badge {
  color: #051E6E;
  border-color: #051E6E !important;
}

.rounded-circle {
  width: 32px;
  height: 32px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
}

/* Navigation elements */
.static-top.navbar-dark {
  background-color: transparent;
  box-shadow: none;
  color: #051E6E;
  padding: 0 24px;
}
@media (max-width: 576px) {
  .static-top.navbar-dark {
    padding-left: 5px;
    padding-right: 5px;
  }
}


.navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li.dropdown > a:hover {
  background-color: transparent;
}

.navbar-dark .navbar-nav .show.dropdown-menu {
  background-color: white;
  text-decoration: none;
}

.navbar-dark .navbar-nav .show.dropdown-menu > li > a {
  color: #051E6E;
  text-decoration: none;
}

.navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover, a:focus {
  color: #0555FA !important;
  text-decoration: none !important;
  background-color: transparent;
}

.navbar-dark .dropdown-divider {
  border-color: #C5C5C5 !important;
}
.navbar-dark a.dropdown-item:hover {
  text-decoration: none;
  background-color: transparent;
}

.static-top.navbar .menu-bar > .navbar-nav > .divider-vertical {
  height: 25px;
  margin: 0 4px;
  margin-top: 10px;
  border-right: 1px solid #fff;
  border-left: 1px solid #666;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: "Graphik Regular";
  font-style: normal;
  font-size: 12px;
  line-height: 14px;
  color: #051E6E;
  padding-top: 0px;
  text-decoration:none;
  cursor:pointer;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a img.account-image {
  box-shadow: 0px 0px 0px 2px rgba(18, 86, 250, 0.24);
  border-radius: 34px;
  vertical-align: top;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info {
  padding-left: 12px;
  display: inline-block;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info .username {
  vertical-align: text-top;
  font-size: 12px !important;
  color: black;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info .useraccountname {
  vertical-align: text-bottom;
  color: #051E6E;
  font-family: "Graphik Regular";
  font-size: 15px !important;
  line-height: 22px;
  font-weight: 600 !important;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a.btn {
  color: white;
  font-weight: 800;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a.btn span {
  line-height: 18px;
  padding-left: 2px;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a.btn:hover {
  color: white;
  font-weight: 800;
}

.static-top.navbar .menu-bar > .navbar-nav > li > .btn:hover {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA !important;
  border-color: #0555FA !important;
}

.static-top.navbar .menu-bar > .navbar-nav > li > .btn:active {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA !important;
  border-color: #0555FA !important;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a.focus {
  border: none;
  text-decoration: none;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a.show {
  background-color: transparent;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
  text-decoration: none;
}

/*Dropdown style adjustments*/
.breadcrumb-item {
  color: #051E6E !important;
  font-family: "Graphik Regular";
  font-size: 12px;
}

.breadcrumb > .active {
  color: #051E6E;
  font-weight: normal;
}

/* main sidebar navigation */
#sidebarMainNavi {
  color: #0555FA;
}
#sidebarMainNavi li {
  margin: 0px 0px 12px 0px;
}
#sidebarMainNavi li a {
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  line-height: 35px;
  color: #051E6E;
  width: 80%;
}
#sidebarMainNavi li a i {
  font-size: 16px;
}
#sidebarMainNavi li a img {
  padding-right: 12px;
}
#sidebarMainNavi li a span.badge {
  top: 32%;
  right: 20%;
  color: #545454;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  line-height: 15px;
  border-radius: 15px;
  font-size: 10px;
}
#sidebarMainNavi li a.active {
  background-color: white;
  width: 80%;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  color: #0555FA;
  margin-left: -49px;
  padding-left: 60px;
  min-width: 105%;
  margin-right: -20px;
}
#sidebarMainNavi li a:hover {
  line-height: 35px;
  background-color: rgba(255,255,255,0.5);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  color: #0555FA;
  text-decoration: none;
  margin-left: -49px;
  padding-left: 60px;
  min-width: 105%;
  margin-right: -20px;
}
#sidebarMainNavi li.divider-horizontal {
  border-top: 1px solid rgba(197, 197, 197, 0.5);
  height: 1px;
  width: 80%;
}

.carousel-thumbmail {
  width: 120px;
  padding: 0;
  border-color: transparent;
}

.carousel-indicators {
  margin-bottom: -30px;
  margin-left: 50px;
  border: none;
}
.carousel-indicators .active {
  width: 120px;
  padding: 0;
  border-color: #0555FA;
}
.carousel-indicators .active:focus {
  border: 2px solid;
}

.carousel-indicators [data-bs-target] {
  width: 120px;
  height: inherit;
  padding: 0;
  border: 1px solid transparent;
  opacity: 1;
  background: transparent;
}

/* External applications navigation (offcanvas) */
/* offcanvas */
/* offcanvas */
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 24px;
  overflow-y:scroll;
}
.offcanvas .offcanvas-title, .offcanvas-lg .offcanvas-title, .offcanvas-md .offcanvas-title, .offcanvas-sm .offcanvas-title, .offcanvas-xl .offcanvas-title, .offcanvas-xxl .offcanvas-title {
  font-family: GraphikWide Semibold;
  color: #051E6E;
}
.offcanvas .offcanvas-header, .offcanvas-lg .offcanvas-header, .offcanvas-md .offcanvas-header, .offcanvas-sm .offcanvas-header, .offcanvas-xl .offcanvas-header, .offcanvas-xxl .offcanvas-header {
  padding-bottom: 8px;
}
.offcanvas .offcanvas-body, .offcanvas-lg .offcanvas-body, .offcanvas-md .offcanvas-body, .offcanvas-sm .offcanvas-body, .offcanvas-xl .offcanvas-body, .offcanvas-xxl .offcanvas-body {
  padding: 0px 60px 60px;
}
.offcanvas .offcanvas-body p, .offcanvas-lg .offcanvas-body p, .offcanvas-md .offcanvas-body p, .offcanvas-sm .offcanvas-body p, .offcanvas-xl .offcanvas-body p, .offcanvas-xxl .offcanvas-body p {
  font-family: Graphik Regular;
  color: #051E6E;
  font-size: 16px;
  padding-top: 0px;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi {
  padding-left: 0;
  padding-right: 0;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item {
  background-color: rgba(18, 86, 250, 0.08);
  border: 1px solid rgba(205, 220, 255, 0.3);
  line-height: 56px;
  margin-bottom: 8px;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a {
  margin-left: 0;
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  color: #051E6E;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a img {
  padding-right: 16px;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a i {
  color: #051E6E;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover {
  color: #0555FA;
  text-decoration: none;
}
.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i {
  color: #0555FA;
}
.offcanvas .btn-close, .offcanvas-lg .btn-close, .offcanvas-md .btn-close, .offcanvas-sm .btn-close, .offcanvas-xl .btn-close, .offcanvas-xxl .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  font-size: 15px;
  color: #231F20;
}
.offcanvas .btn-block, .offcanvas-lg .btn-block, .offcanvas-md .btn-block, .offcanvas-sm .btn-block, .offcanvas-xl .btn-block, .offcanvas-xxl .btn-block {
  width: 100%;
}

/* Icons */
.icon-bell {
  background-image: inline-image("./images/bell.png");
  background-position: center center;
}

.icon-shoppingcart {
  background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
  background-position: center center;
}

.icon-offcanvas-mainNavi {
  background-image: url('data:image/svg+xml,<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 14.5C10.8125 14.5 11.5 15.1875 11.5 16C11.5 16.8438 10.8125 17.5 10 17.5C9.15625 17.5 8.5 16.8438 8.5 16C8.5 15.1875 9.15625 14.5 10 14.5ZM8.5 11.25C8.5 10.4375 9.15625 9.75 10 9.75C10.8125 9.75 11.5 10.4375 11.5 11.25C11.5 12.0938 10.8125 12.75 10 12.75C9.15625 12.75 8.5 12.0938 8.5 11.25ZM8.5 20.75C8.5 19.9375 9.15625 19.25 10 19.25C10.8125 19.25 11.5 19.9375 11.5 20.75C11.5 21.5938 10.8125 22.25 10 22.25C9.15625 22.25 8.5 21.5938 8.5 20.75Z" fill="%23051E6E"/><path d="M15 14.5C15.8125 14.5 16.5 15.1875 16.5 16C16.5 16.8438 15.8125 17.5 15 17.5C14.1562 17.5 13.5 16.8438 13.5 16C13.5 15.1875 14.1562 14.5 15 14.5ZM13.5 11.25C13.5 10.4375 14.1562 9.75 15 9.75C15.8125 9.75 16.5 10.4375 16.5 11.25C16.5 12.0938 15.8125 12.75 15 12.75C14.1562 12.75 13.5 12.0938 13.5 11.25ZM13.5 20.75C13.5 19.9375 14.1562 19.25 15 19.25C15.8125 19.25 16.5 19.9375 16.5 20.75C16.5 21.5938 15.8125 22.25 15 22.25C14.1562 22.25 13.5 21.5938 13.5 20.75Z" fill="%23051E6E"/><path d="M20 14.5C20.8125 14.5 21.5 15.1875 21.5 16C21.5 16.8438 20.8125 17.5 20 17.5C19.1562 17.5 18.5 16.8438 18.5 16C18.5 15.1875 19.1562 14.5 20 14.5ZM18.5 11.25C18.5 10.4375 19.1562 9.75 20 9.75C20.8125 9.75 21.5 10.4375 21.5 11.25C21.5 12.0938 20.8125 12.75 20 12.75C19.1562 12.75 18.5 12.0938 18.5 11.25ZM18.5 20.75C18.5 19.9375 19.1562 19.25 20 19.25C20.8125 19.25 21.5 19.9375 21.5 20.75C21.5 21.5938 20.8125 22.25 20 22.25C19.1562 22.25 18.5 21.5938 18.5 20.75Z" fill="%23051E6E"/></svg>');
}

/* Forms */
/* Generic */
.form-section-info h4 {
  font-size: 16px;
  font-family: "GraphikWide Regular";
  color: #051E6E !important;
}
.form-section-info p {
  color: #051E6E !important;
}
.form-section-info ul li {
  font-family: "Graphik Regular";
  font-size: 14px;
  color: #051E6E !important;
}

select.form-select,
input.form-control {
  border-radius: 0px !important;
}

.input-group-text {
  background-color: transparent;
  color: #0555FA;
  border-color: #909090;
}
.input-group-text .form-control input {
  color: #909090;
}

#profileEditFormContainer .form-check-input {
  width: 43px !important;
  height: 24px;
}
#profileEditFormContainer .fw-lighter {
  color: #000000;
  font-size: 14px !important;
  font-weight: lighter;
}
#profileEditFormContainer .fw-bolder {
  color: #000000;
  font-size: 16px !important;
}
#profileEditFormContainer p {
  font-family: "Graphik Regular";
  line-height: 22px;
  font-size: 14px;
  padding-bottom: 24px;
  color: #051E6E !important;
}
#profileEditFormContainer p.toggle-heading,
#profileEditFormContainer p.toggle-description {
  font-family: "Graphik Semibold";
  color: black !important;
  font-size: 16px;
}
#profileEditFormContainer p.toggle-description {
  font-size: 16px;
  font-family: "Graphik Regular";
}
#profileEditFormContainer form div {
  margin-bottom: 16px;
}
#profileEditFormContainer select,
#profileEditFormContainer option,
#profileEditFormContainer input[type=email],
#profileEditFormContainer input[type=password],
#profileEditFormContainer input[type=number],
#profileEditFormContainer input[type=tel],
#profileEditFormContainer input[type=text] {
  color: black;
  font-family: "Graphik Regular";
  font-size: 16px;
  line-height: 40px;
  border-color: rgba(96, 101, 126, 0.4);
}
#profileEditFormContainer select:disabled,
#profileEditFormContainer input[type=email]:disabled,
#profileEditFormContainer input[type=text]:disabled {
  color: black;
  background-color: #F5F7F9 !important;
}
#profileEditFormContainer label {
  color: #676767;
  font-family: "Graphik Semibold";
  font-weight: bold;
  font-size: 12px;
  background-color: white;
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 0px 4px 0px 4px;
}

/* Offcanvas forms */
#offCanvasEditMemberInfo .offcanvas-header,
#offCanvasAddTeamMember .offcanvas-header,
#offCanvasRequestAccountForm .offcanvas-header {
  padding-bottom: 14px;
}
#offCanvasEditMemberInfo .offcanvas-header .offcanvas-title,
#offCanvasAddTeamMember .offcanvas-header .offcanvas-title,
#offCanvasRequestAccountForm .offcanvas-header .offcanvas-title {
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  line-height: 20px;
  color: black;
}
#offCanvasEditMemberInfo .offcanvas-header .offcanvas-title h5,
#offCanvasAddTeamMember .offcanvas-header .offcanvas-title h5,
#offCanvasRequestAccountForm .offcanvas-header .offcanvas-title h5 {
  font-family: "GraphikWide Semibold";
  font-size: 20px;
  line-height: 20px;
  color: black;
}
#offCanvasEditMemberInfo .offcanvas-body p,
#offCanvasAddTeamMember .offcanvas-body p,
#offCanvasRequestAccountForm .offcanvas-body p {
  color: #666666;
  font-family: "Graphik Regular";
  line-height: 22px;
  font-size: 14px;
  padding-bottom: 24px;
}
#offCanvasEditMemberInfo .offcanvas-body form div,
#offCanvasAddTeamMember .offcanvas-body form div,
#offCanvasRequestAccountForm .offcanvas-body form div {
  margin-bottom: 16px;
}
#offCanvasEditMemberInfo .offcanvas-body select,
#offCanvasEditMemberInfo .offcanvas-body option,
#offCanvasEditMemberInfo .offcanvas-body input[type=number],
#offCanvasEditMemberInfo .offcanvas-body input[type=email],
#offCanvasEditMemberInfo .offcanvas-body input[type=text],
#offCanvasAddTeamMember .offcanvas-body select,
#offCanvasAddTeamMember .offcanvas-body option,
#offCanvasAddTeamMember .offcanvas-body input[type=number],
#offCanvasAddTeamMember .offcanvas-body input[type=email],
#offCanvasAddTeamMember .offcanvas-body input[type=text],
#offCanvasRequestAccountForm .offcanvas-body select,
#offCanvasRequestAccountForm .offcanvas-body option,
#offCanvasRequestAccountForm .offcanvas-body input[type=number],
#offCanvasRequestAccountForm .offcanvas-body input[type=email],
#offCanvasRequestAccountForm .offcanvas-body input[type=text] {
  color: black;
  font-family: "Graphik Regular";
  font-size: 16px;
  line-height: unset;
  border-color: rgba(96, 101, 126, 0.4);
}
#offCanvasEditMemberInfo .offcanvas-body input[type=text]:disabled,
#offCanvasAddTeamMember .offcanvas-body input[type=text]:disabled,
#offCanvasRequestAccountForm .offcanvas-body input[type=text]:disabled {
  color: black;
  background-color: #ccc;
}
#offCanvasEditMemberInfo .offcanvas-body label,
#offCanvasAddTeamMember .offcanvas-body label,
#offCanvasRequestAccountForm .offcanvas-body label {
  color: #676767;
  font-family: "Graphik Semibold";
  font-weight: bold;
  font-size: 12px;
  background-color: white;
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 0px 4px 0px 4px;
}
#offCanvasEditMemberInfo .offcanvas-body select:disabled,
#offCanvasEditMemberInfo .offcanvas-body input[type=email]:disabled,
#offCanvasEditMemberInfo .offcanvas-body input[type=text]:disabled,
#offCanvasAddTeamMember .offcanvas-body select:disabled,
#offCanvasAddTeamMember .offcanvas-body input[type=email]:disabled,
#offCanvasAddTeamMember .offcanvas-body input[type=text]:disabled,
#offCanvasRequestAccountForm .offcanvas-body select:disabled,
#offCanvasRequestAccountForm .offcanvas-body input[type=email]:disabled,
#offCanvasRequestAccountForm .offcanvas-body input[type=text]:disabled {
  color: black;
  background-color: #F5F7F9 !important;
}
#offCanvasEditMemberInfo .offcanvas-footer,
#offCanvasAddTeamMember .offcanvas-footer,
#offCanvasRequestAccountForm .offcanvas-footer {
  /*background-color: #ECF0F4;*/
  padding-top: 16px;
  padding-bottom: 54px;
}
#offCanvasEditMemberInfo .alert,
#offCanvasAddTeamMember .alert,
#offCanvasRequestAccountForm .alert {
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  line-height: 20px;
  color: black;
}

table.table.dataTable {
  margin-top: 14px !important;
}

tbody, td, tfoot, th, thead, tr {
  font-family: "Graphik Regular";
  border-color: inherit;
  border-style: solid;
  border-top: none;
  border-width: 0;
  border-left: none;
  border-right: none;
  color: #242424;
  padding-bottom: 10px !important;
  font-weight: 100 !important;
  border-color: #EFEFEF;
}

tbody.bootstrap-table tr:hover {
  background-color: #0555FA;
  color: white;
}

thead {
  font-size: 14px;
  font-weight: 100;
  color: #242424;
}

th:hover {
  color: #0555FA;
}

tbody td span {
  font-family: "Graphik Regular";
  font-size: 14px;
}

tbody td a {
  color: #242424;
  font-family: "Graphik Regular";
}

.bootstrap-table .fixed-table-container .table thead th {
  padding-left: 23px;
  color: #242424;
  column-width: auto;
}

.table > :not(caption) > * > * {
  padding-left: 23px;
}

#assetsDatatable > :not(caption) > * > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#assetsDatatable > tbody td .gallery-list-item .gallery-list-item-info {
  align-items: flex-start;
  padding-right: 1rem;
}

#assetsDatatable > tbody td .bookmark a {
  color: #0555FA !important;
}

.assetDocumentsTable {
  font-size: 12px;
}

.assetDocumentsTable > :not(caption) > * > * {
  padding: 0.5rem 0.5rem !important;
}

@media only screen and (max-width: 576px) {
  .assetDocumentsTable thead {
      background: #F1F3F7 !important;
  }
}

.assetDocumentsTable > thead th {
  font-family: "Graphik Semibold";
}

.assetDocumentsTable > thead th:hover {
  color: inherit;
}

.assetDocumentsTable > tbody .name {
  color: #051E6E;
  font-size: 1em;
  font-family: "Graphik Semibold";
}

.bootstrap-table .fixed-table-container .table tbody td .btn-default {
  padding-left: 10px;
  color: #242424;
  column-width: 200px;
  background-color: transparent;
  border-width: 0px;
}

tbody td .gallery-list-item .gallery-list-item-info,
tbody td .gallery-list-item {
  display: flex;
  align-items: center;
}

tbody td .gallery-list-item .gallery-list-item-info {
  flex-direction: column;
  padding-left: 1em;
  align-items: start;
}
tbody td .gallery-list-item a.heading {
  font-size: 14px;
  color: #242424;
  font-family: "Graphik Semibold";
  font-weight: bold;
}

tbody td .gallery-list-item a.subheading {
  font-size: 14px;
  color: #242424;
  font-family: "GraphikWide Light";
  font-weight: normal;
}

.bootstrap-table .fixed-table-container .table td, .bootstrap-table .fixed-table-container .table th {
  line-height: 25px;
}
.alert {
  border-left: 19px solid black;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: none !important;
}
.alert i {
  font-size: 29px;
}
.alert button i {
  color: #858585;
}
.alert span {
  color: #858585 !important;
  font-family: "Graphik Semibold" !important;
  line-height: 29px;
}
.alert.alert-success {
  border-left-color: #146A17 !important;
}
.alert.alert-success i,
.alert.alert-success span {
  color: #146A17 !important;
}
.alert.alert-success button i {
  color: #146A17 !important;
}
.alert.alert-danger {
  border-left-color: #FF2103 !important;
}
.alert.alert-danger i,
.alert.alert-danger span {
  color: #FF2103 !important;
}
.alert.alert-danger button i {
  color: #FF2103 !important;
}
.alert.alert-warning {
  border-left-color: #664d03 !important;
}
.alert.alert.alert-warning i,
.alert.alert.alert-warning span {
  color: #664d03 !important;
}
.alert.alert-primary {
  border: 1px solid #0555FA !important;
}
.alert.alert-primary i,
.alert.alert-primary span {
  color: #0555FA !important;
}

.alert.alert-info {
  background-color: #ebf0f5;
  border: none !important;
}
.alert.alert-info i,
.alert.alert-info span {
  color: #555a5f !important;
  line-height: 1.5 !important;
}

.toast-container {
  width: 100%;
  z-index: 99999 !important;
}
.toast-container .toast {
  width: 100%;
  background-color: #E7EFE7;
  border-style: solid;
  border-left: 28px solid #146A17 !important;
  border-bottom: none !important;
  border-right: none !important;
  border-top: none !important;
  border-radius: 0 !important;
}
.toast-container .toast .toast-header {
  color: #146A17;
  background-color: #E7EFE7;
  border-bottom: none !important;
  padding-bottom: 0px !important;
}
.toast-container .toast .toast-header i {
  font-size: 26px;
  padding-right: 12px;
}
.toast-container .toast .toast-header strong {
  font-family: "GraphikWide Semibold";
  font-size: 18px;
  line-height: 29px;
  color: #146A17;
}
.toast-container .toast .toast-body {
  color: #858585;
  font-size: 1em;
  font-family: "Graphik Regular";
  padding-top: 0px !important;
}
.toast-container .toast-error {
  background-color: #EEEEEE;
  border-left: 28px solid #FF2103 !important;
}
.toast-container .toast-error .toast-header {
  color: #FF2103;
}
.toast-container .toast-error .toast-header strong {
  color: #FF2103;
}
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 100000; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(236, 240, 244); /* Black fallback color */
  background-color: rgba(236, 240, 244, 0.8); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  display:none;
  /*transition: 0.05s;*/ /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
}
.overlay.active {
  /*width: 100%;*/
  display: block;
}

.overlay.inactive {
  /*width: 0;*/
  display: none;
}

.offcanvas-body .card {
  border: none !important;
  border-radius: 5px !important;
  background: #D9D9D9;
}
.offcanvas-body .card-body {
  background: #D9D9D9;
  border-radius: 5px;
}
.lighterBg {
  background: #f7f7f7 !important;
}
.offcanvas-body .offcanvas-label-text {
  font-family: "Graphik Semibold" !important;
  color: #676767 !important;
  font-size: 12px !important;
}
.offcanvas-body .offcanvas-text {
  font-family: "Graphik Regular" !important;
  color: #676767 !important;
  font-size: 14px !important;
}
.offcanvas-body .text-muted {
  font-family: "Graphik Regular" !important;
  font-size: 12px !important;
}

.offCanvasMessageTitle {
  font-family: "Graphik Semibold" !important;
  color: #0555FA !important;
  font-size: 12px !important;
}

.ticket-title {
  color: #051E6E !important;
  font-family: "GraphikWide Semibold";
  font-size: 48px;
}

.card {
  border: none !important;
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.card-img, .card-img-top {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.card-body.card-bg-white {
  padding: 0px !important;
}

.card-body {
  border: none;
}
.card-body h5 a {
  font-family: "GraphikWide Semibold";
  font-size: 20px;
}
.card-body p {
  font-family: "Graphik Regular";
  font-size: 14px;
}

.card-title {
  font-weight: bold;
  color: #051E6E;
}

.card-body.support-service {
  background-color: white !important;
  border: none;
  padding: 0 !important;
  line-height: 1;
}

.card.btn i {
  padding: 0px !important;
}

.badge.status-0,
.badge.status-new {
  background-color: #EBF2F8;
  font-size: 12px;
  color: #054B90;
}

.badge.status-Premium,
.badge.status-930650003,
.badge.status-inprogress,
.badge.status-shipped {
  background-color: #F8F7EB;
  font-size: 12px;
  color: #936A00;
  font-family:Sans-Serif;
}

.badge.status-1,
.badge.status-Basic,
.badge.status-done {
  background-color: #EDF9F1;
  font-size: 12px;
  color: #146A17;
}

.badge.status-2 {
  background-color: #EDF9F1;
  font-size: 12px;
  color: #ff6e5a;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px;
}

.dot.status-0,
.dot.status-new {
  background-color: #054B90;
}

.dot.status-Premium,
.dot.status-930650003,
.dot.status-inprogress,
.dot.status-shipped {
  background-color: #936A00;
}

.dot.status-1,
.dot.status-Basic,
.dot.status-done {
  background-color: #146A17;
}

.dot.status-2 {
  background-color: #ff6e5a;
}

.badge.inline {
  float: none;
}

.badge.badge-checked {
  background-color: white;
  font-size: 12px;
  color: #051E6E;
  border: 1px solid #EBF2F8;
}

/* Special pages */
/*********		SIGN IN 		*******/
.signinpage {
  color: #051E6E;
}
.signinpage .portal-form {
  background-color: white;
  padding: 24px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.signinpage .col-form-label {
  text-align: left;
}
.signinpage .checkbox span {
  font-size: 0.8rem !important;
}
.signinpage span {
  color: #051E6E;
}
.signinpage .alert li a {
  color: #051E6E;
}
.signinpage .alert li a:hover {
  text-decoration: none;
  color: #0555FA;
}
.signinpage p.form-text span {
  font-size: 0.8rem;
  color: #051E6E;
}

/* Sign In form */
/*
#content-container.signinpage .page-content.row .row {background: #ffffff; border-radius: .25rem !important; margin-top: 100px; margin-bottom: 100px;
    padding-left: 2.14rem !important; padding-right: 2.14rem !important; padding-top: 2.85rem !important; padding-bottom: 2.85rem !important;
    flex-direction: column; justify-content: space-between;}
	@media (min-width: 992px){
		#content-container.signinpage .page-content.row .row { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
	}
	@media (max-width: 992px){
		#content-container.signinpage .page-content {flex-direction: column-reverse;}
		#content-container.signinpage .page-content.row .row {background: #fff;}
	}
	#content-container.signinpage .page-content.row .row .col-md-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	#content-container.signinpage .page-content.row .row .col-md-6:first-child {margin-bottom: 40px;}

	#content-container.signinpage .page-content.row .row .col-md-6 .form-group .label, 
	#content-container.signinpage .page-content.row .row .col-md-6 .form-group .col-sm-8 {-ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; }
	#content-container.signinpage .page-content.row .row .col-md-6 .form-group .form-control {padding: 1em;}

	#content-container.signinpage .page-content #submit-signin-local {padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; display: block; width: 100%;}

	#content-container.signinpage .page-content.row .row .col-md-6 form fieldset {position: relative;}
	#content-container.signinpage .page-content.row .row .col-md-6 button.btn[name='provider'] 
		{margin: 5px auto!important; width: 100%; padding: 1rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; flex: 0 0 auto;} 

	#content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Facebook"]	{border-color: #4c70ba; background: #4c70ba url('[...]/facebook.png') no-repeat 5% center;	background-size: auto 40%;}
	#content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Google"]		{border-color: #4285F4; background: #4285F4 url('[...]/google.png') no-repeat 5% center;		background-size: auto 40%;}
    #content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="LinkedIn"]	{border-color: #0077B5; background: #0077B5 url('[...]/linkedin.png') no-repeat 5% center;	background-size: auto 40%;}
    #content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Azure AD-kontoen"] {border-color: #00a4ef; background: #00a4ef url('[...]/signinwithmicrosoft.jpg') no-repeat 5% center;	background-size: 100% auto; color: transparent!important;}
	#content-container.signinpage .page-content.row .row .col-md-6 button.btn:hover {background-color: #efb225;}

	#content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Skill-interne"] {border-color: transparent; background-color: transparent; background: tranparent; color: #333; position: absolute; bottom: -64px; left: 0;}
	#content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Skill-interne"]:hover {background: rgba(0,0,0,0.1); border-color: #efb225;}
*/
/* Redeem Invotation Code Page */
/*
	 #content-container.signinpage.redeem{ z-index: 1;}
	 #content-container.signinpage.redeem #content .page-content form {
	    background: #ffffff; border-radius: .25rem !important; margin-top: 100px; margin-bottom: 100px;
		padding-left: 2.14rem !important; padding-right: 2.14rem !important; padding-top: 2.85rem !important; padding-bottom: 2.85rem !important;
		flex-direction: column; justify-content: space-between;
		}
		@media (min-width: 992px){
			#content-container.signinpage.redeem #content .page-content form { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
		}
	#content-container.signinpage.redeem #content .page-content form legend span {padding: 0px 10px;}
	input#InvitationCode, label[for*="InvitationCode"] {width: 100%; display: block; word-break: normal; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display:none;}
	#content-container.signinpage.redeem .col-sm-offset-2.col-sm-10 .checkbox {display:none;}
	button#submit-redeem-invitation {margin: 5px auto!important; width: 100%; padding: 1rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem;}
	button#submit-redeem-invitation:hover {background: #008895;}
*/
/* Register */
/*
#ContentContainer_MainContent_PageCopy_PageCopy {margin: 0px;}
#Register {width: 100%;}
#ContentContainer_MainContent_MainContent_SecureRegister .alert{display:none;}
#Register #ContentContainer_MainContent_MainContent_SecureRegister .row {margin: 0 auto; margin-bottom: 50px;}
#Register #ContentContainer_MainContent_MainContent_SecureRegister .row .col-md-6 button.btn[title*="Skill-interne"] {display:none;}
*/
/* Content Snippets*/
.user-hero {
  display: flex;
  align-items: center;
}
.user-hero .user-hero-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 12px;
}
.user-hero .user-hero-details {
  display: flex;
  flex-direction: column;
}
.user-hero .user-hero-details .fw-bolder {
  color: #051E6E;
  font-size: 20px !important;
}
.user-hero .user-hero-details .fw-lighter {
  color: #051E6E;
  font-size: 14px !important;
  font-weight: lighter;
}

.fa.fa-chevron-down {
  width: 10px;
  height: 10px;
  color: #242424;
  opacity: 50%;
  margin-left: 6px !important;
}

.bootstrap-table .fixed-table-container .table tbody td {
  font-family: "Graphik Regular";
  font-size: 14px;
}

/*dropdown*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #ECF0F4;
  color: #051E6E;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover {
  background-color: #ECF0F4;
  color: #051E6E;
}

.bootstrap-table .fixed-table-container .table tbody td .btn-primary.dropdown-toggle.show {
  color: #ffffff;
  background-color: #0555FA;
  border-color: #0555FA;
}

.bootstrap-table .fixed-table-container .table tbody td .btn-primary:focus {
  color: white !important;
  background-color: #0555FA !important;
  border-color: #0555FA !important;
}
@media (max-width: 576px) {
  .custom-search-container div.dt-search {
    text-align: left !important;
  }
  .custom-search-container div.dt-search label {
    max-width: 20% !important;
  }
  .custom-search-container div.dt-search input {
    width: 80% !important;
  }
}

.avatar {
  display: flex;
  align-items: center;
}
.avatar .avatar-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
}
.avatar .avatar-details {
  display: flex;
  flex-direction: column;
}
.avatar .avatar-details span {
  color: black;
  font-family: "Graphik Regular";
  font-size: 15px;
}
.avatar .avatar-details span.fw-bolder {
  font-weight: 600 !important;
  color: black;
}
.avatar .avatar-details span.fw-lighter {
  font-size: 12px;
  color: black;
}

.nav-tabs {
  --bs-nav-tabs-border-width: none !important;
  --bs-nav-tabs-link-active-color: #0555FA;
}

.nav {
  --bs-nav-link-padding-x: 32px;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-weight: bolder;
  --bs-nav-link-color: #C5C5C5;
  --bs-nav-link-hover-color: #051E6E ;
}

.bg-secondary {
  --bs-badge-font-weight: 600;
  --bs-badge-color: #C5C5C5;
  background-color: transparent !important;
  border-color: #f5f5f5 !important;
  border-radius: 100px !important;
  border-width: 0.5px !important;
  padding-left: 5px;
  padding-right: 6px;
  padding-top: 5px;
  padding-bottom: 4px;
  margin-top: -1px;
  border-style: solid;
  margin-left: 10px;
}

.bg-secondary:active {
  --bs-badge-color: #0555FA !important;
}

.nav-tabs .nav-link {
  padding-left: 14px !important;
  padding-right: 14px !important;

  display: flex !important;
  align-items: center !important;
}

@media (max-width: 576px) {
  .nav-tabs .nav-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.dt-container .dt-length label {
  font-family: "Graphik Regular" !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: black !important;
}
.dt-container .dt-length select option,
.dt-container .dt-length select {
  font-family: "Graphik Regular" !important;
}
.dt-container .dt-search label {
  font-family: "Graphik Regular" !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: black !important;
}
.dt-container input[type=search],
.dt-container a.dropdown-toggle,
.dt-container select,
.dt-container .dt-info {
  font-family: "Graphik Regular" !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #909090 !important;
  border-radius: 20px !important;
  border-color: #DFDFDF !important;
}
.dt-container .dt-info {
  color: black !important;
}
.dt-container a.dropdown-toggle,
.dt-container select.form-select {
  border-radius: 20px !important;
  font-size: 12px !important;
  color: black !important;
}
.dt-container select option {
  border-radius: 0px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #909090 !important;
}
.dt-container select.form-select option {
  border-radius: 0px !important;
  font-size: 12px !important;
}
.dt-container .dt-select select option {
  font-size: 12px;
}
.dt-container ul.dropdown-menu {
  padding: 14px;
  width: 250px;
}
.dt-container ul.dropdown-menu li {
  font-family: "GraphikWide Regular" !important;
  font-size: 12px !important;
}

table.table.dataTable {
  margin-top: 14px !important;
}
table.table.dataTable tr td div {
  font-size: 13px !important;
}
table.table.dataTable .table-cell-content {
  font-size: 12px !important;
  padding: 6px 0px !important;
}
table.table.dataTable button.table-cell-button {
  font-size: 12px;
  padding: 4px 10px;
}

/* Global Styles */
body {
  background-color: #ECF0F4;
}

#pageWrapper {
  padding-top: 24px;
  padding-left: 48px;
  padding-right: 48px;
  max-width: 1920px;
  margin: 0 auto;
}
@media (max-width: 576px) {
  #pageWrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 576px) {
  #pageWrapper {
    padding-left: 5px;
    padding-right: 5px;
  }
}

p, .p, .page_section p, .section-diagonal-left p, .section-diagonal-right p, p.form-text span {
  font-family: "Graphik Regular";
  font-weight: normal;
  font-size: 16px;
  color: --portalThemeColor1;
}

#mainContent {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 60px;
  background: white;
  padding: 3%;
  border-radius: 0.5rem;
}
#mainContent .page-top-color-header {
  background: linear-gradient(180deg,#9dfbaa,#71f1de);;
  padding: 25px;
  display: flex;
  justify-content: space-between;
}
#mainContent .page-top-color-header.blue {
  background-color: #0555FA;
  color: white;
}
#mainContent .page-top-color-header.blue h1,
#mainContent .page-top-color-header.blue p {
  color: white;
}
#mainContent .page-top-color-header .header-icon {
  font-size: 3rem;
  color: white;
  margin-left: 40px;
}
#mainContent .page-top-color-header .header-info {
  margin-left: 40px;
}

.offcanvas {
  background-color: white !important;
  z-index: 10000;
}

hr {
  border-color: rgba(5, 30, 110, 0.8);
}

.user-photo {
  display: flex;
  align-items: center;
}
.user-photo .user-photo-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 12px;
}
.user-photo .user-photo-details {
  display: flex;
  flex-direction: column;
}

.vr {
  margin-left: 5px;
  margin-right: 5px;
  height: 14px;
  color: black;
}

.hr.white {
  color: white;
}

.bg-doppelmayr-primary {
  background-color: #0555FA;
}
.bg-doppelmayr-primary h5 {
  color: white !important;
  font-family: "GraphikWide Regular";
  font-size: 14px;
}
.bg-doppelmayr-primary p {
  color: white;
  font-family: "Graphik Regular";
  font-size: 12px;
}

/*
.timeline {
  position: relative;
  list-style: none;
  padding: 0;
}
.timeline li {
  margin-bottom: 20px;
  padding-left: 40px;
  position: relative;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #007bff;
  border: 2px solid #fff;
  z-index: 1;
  
}
.timeline .animate::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #007bff;
  border: 2px solid #fff;
  animation: pulse 2s infinite alternate;
  z-index: 1;
  
}

.timeline li::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 10px;
  width: 1px;
  height: 150%;
  background-color: #ededed;
}
.timeline li:last-child::after {
  display: none;
}
.timeline li p {
  margin: 0;
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.5);
  }
  100% {
      transform: scale(1);
  }
}
  */

.graphik-regular {
  font-family: "Graphik Regular";
}

.offcanvas-color-header {
  /* background: linear-gradient(180deg,#9dfbaa,#71f1de); */
  background: #0555FA;
  padding: 25px;
  display:flex;
  justify-content: space-between;
}

.blue {
  /*  background:linear-gradient(180deg,#2D82F8,#65DFF1); */
  background:#0555FA;
  color:white;
}

.blue h1, .blue p {
  color:white !important;
}

.offcanvas-header-icon {
  font-size: 3rem;
  color:white;
  margin-left:40px;
}

.icon-padding-small {
  margin-left:20px;
}

.offcanvas-close-icon {
  color:white;
  cursor:pointer;
}

.offcanvas {
  min-width: 50%;
}

.supportCaseCommentField {
  padding: 5px 10px;
  font-family: sans-serif;
  width: 100%;
  resize: vertical;
  border-color: #cdd2e2;
}

#attachmentsList {
  border:1px solid #cdd2e2;
  padding: 8px 12px;
  margin: 0px 0px 12px 12px;
}

#attachmentsList a, #attachmentsList i {
  color:#0555FA;
}

.left-35 {
  padding-left:35px;
}

.z-1 {
  z-index:1;
}

.Outgoing .lighterBg {
  background:#0555fa14 !important;
}

@media screen and (min-width: 1921px)  {
  #sidebarMainNavi li a.active {
    border-radius:50px;
  }
}

.nav-item .dropdown-toggle::after {
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-right-width: 0.3em;
  border-right-style: solid;
  border-right-color: transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

#notificationsButtonBadge {
  display:none;
  position: absolute;
  font-weight: bold;
  font-style:normal;
  top: -2px;
  right: -7px;
  display: block;
  background: #ffffff;
  border: 1px solid blue;
  color: blue;
  box-shadow: 0px 0px 0px 2px #ecf0f4;
  min-width: 16px;
  padding: 1px 2px 3px 2px;
}

#notificationsButton {
  margin-right:3px;
}

#notificationsBell {
  font-size: 22px;
  position: relative;
  /* color: #374b60; */
  color:#1c5efb;
}

#incidentNotificationsList li:hover {
  background:rgb(236, 236, 236);
  border-radius:4px;
}

#incidentNotificationsList:before {
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  border: 1px solid #c2c6c9;
  border-bottom: 0;
  border-right: 0;
  background: #fff;
  transform: rotate(45deg);
  content: '';
}

.navbar-dark .navbar-nav > li > a:focus {
  border: none !important;
  outline: none !important;
}

.team-icon {
  margin-top: -2px;
}

.font-12 {
  font-size:12px;
}

#helpContent > .content > .mb-4 {
  margin-top: 30px !important;
  margin-bottom: 0 !important;
}

#helpContent > .content > img {
  max-width:100% !important;
}

.serviceAccept input {
 height:22px;
 margin-right: 10px;
}

.serviceAccept p, .serviceAccept a  {
  margin:0 !important;
  padding:0 !important;
 }
.display-none {
  display:none;
}
.cursor-pointer {
  cursor:pointer;
}
.display-flex {
  display:flex;
}

#sidebarMainNavi2 {
  padding: 24px !important;
  background: white;
  margin-right: 10px;
  border-radius: 8px;
  display:block;
  }
  #sidebarMainNavi2 ul.nav{
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  #sidebarMainNavi2 ul.nav li{
      display: block;
  }
  #sidebarMainNavi2 ul.nav li a{
      padding: 0 12px !important;
      font-size: 0.9em;
      margin-left: 0px;
      border-radius: 8px;
      font-family: "GraphikWide semibold";
      color: #051E6E;

      display: flex;
      gap: 6px;
  }
  #sidebarMainNavi2 ul.nav li a.active{
      background:#e5e5e5;
  }
  #sidebarMainNavi2 ul.nav li a i{
      font-size: 1.4em;
  }

  #offCanvasCreateServiceRequest .offcanvas-header {
    padding-bottom: 14px;
    padding-left: 58px;
    padding-top: 45px;
    }
    #offCanvasCreateServiceRequest .offcanvas-header h3 {
    color:#051E6E;
    letter-spacing: normal !important;
    text-align: left !important;
    }
    #offCanvasCreateServiceRequest .offcanvas-header .offcanvas-title{
    font-family: "GraphikWide Semibold";
    font-size: 14px;
    line-height: 20px;
    color: black;
    }
    #offCanvasCreateServiceRequest .offcanvas-header .offcanvas-title h5 {
    font-family: "GraphikWide Semibold";
    font-size: 14px;
    line-height: 20px;
    color: black;
    }
    #offCanvasCreateServiceRequest .offcanvas-body{
    letter-spacing: normal !important;
    text-align: left !important;
    }
    #offCanvasCreateServiceRequest .offcanvas-body p {
    color: #666666;
    font-family: "Graphik Regular";
    line-height: 22px;
    font-size: 14px;
    padding-bottom: 24px;
    letter-spacing: normal !important;
    text-align: left !important;

    }
    #offCanvasCreateServiceRequest .offcanvas-body form div {
    margin-bottom: 16px;
    }
    #offCanvasCreateServiceRequest .offcanvas-body select,
    #offCanvasCreateServiceRequest .offcanvas-body option,
    #offCanvasCreateServiceRequest .offcanvas-body textarea,
    #offCanvasCreateServiceRequest .offcanvas-body input[type=number],
    #offCanvasCreateServiceRequest .offcanvas-body input[type=date],
    #offCanvasCreateServiceRequest .offcanvas-body input[type=email],
    #offCanvasCreateServiceRequest .offcanvas-body input[type=text]{
    color: black;
    font-family: "Graphik Regular";
    font-size: 16px;
    line-height: unset;
    border-color: rgba(96, 101, 126, 0.4);
    border-radius: 0;
    border-width: 1px;
    width: 100%;
    }
    #offCanvasCreateServiceRequest .offcanvas-body input[type=date]{
    padding-left: 12px;
    }
    #offCanvasCreateServiceRequest .offcanvas-body textarea{
    min-height: 7em;
    }
    #offCanvasCreateServiceRequest .offcanvas-body input[type=text]:disabled{
    color: black;
    background-color: #ccc;
    }
    #offCanvasCreateServiceRequest .offcanvas-body label {
    color: #676767;
    font-family: "Graphik Semibold";
    font-weight: bold;
    font-size: 12px;
    background-color: white;
    position: absolute;
    top: -9px;
    left: 10px;
    padding: 0px 4px 0px 4px;
    letter-spacing: normal !important;
    }
    #offCanvasCreateServiceRequest .offcanvas-body select:disabled,
    #offCanvasCreateServiceRequest .offcanvas-body input[type=email]:disabled,
    #offCanvasCreateServiceRequest .offcanvas-body input[type=date]:disabled,
    #offCanvasCreateServiceRequest .offcanvas-body input[type=text]:disabled {
    color: black;
    background-color: #F5F7F9 !important;
    }
    #offCanvasCreateServiceRequest .offcanvas-footer,
    #offCanvasCreateServiceRequest .offcanvas-footer,
    #offCanvasCreateServiceRequest .offcanvas-footer {
    padding-top: 16px;
    padding-bottom: 54px;
    }
    #offCanvasCreateServiceRequest .alert p span,
    #offCanvasCreateServiceRequest .alert p,
    #offCanvasCreateServiceRequest .alert {
    font-family: "GraphikWide Semibold";
    font-size: 14px;
    line-height: 20px;
    color: black;
    }
    .input-daterange label{
    z-index: 99;
    }
    .input-daterange .input-group-addon{
    background-color: transparent;
    border: none;
    font-family: "Graphik Semibold";
    font-weight: bold;
    font-size: 12px;
    padding-top:20px
    }


#offCanvasMainNavigation{
      background-color: #FFFFFF !important;
  }
  #offCanvasMainNavigation .offcanvas-body{
      padding: 0 24px !important;
  }
  #offCanvasMainNavigation .offcanvas-body ul.nav{
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  #offCanvasMainNavigation .offcanvas-body ul.nav li{
      display: block;
  }
  #offCanvasMainNavigation .offcanvas-body ul.nav li a{
      font-size: 1.1em;
      font-family: "GraphikWide semibold";
      color: #051E6E;

      display: flex;
      padding: 0 !important;
      gap: 6px;
  }
  #offCanvasMainNavigation .offcanvas-body ul.nav li a i{
      font-size: 1.35em;
  }
  #offCanvasMainNavigation .offcanvas-body h3{
      font-size: 0.7em;
      padding: 0 0 0 10%;
      color: #051E6E;
      font-family: "GraphikWide semibold";
  }
  .language-button,
  .logout-button{
      padding: 0.25rem 0.5rem !important;
      font-size: 0.7rem !important;
      line-height: 1.5 !important;
  }

  .more-options-dropdown {
    border: none;
    padding: 0;
  }

  .more-options-dropdown ul {
    list-style-type: none;
    padding: 10px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }



/** scss output **/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css");
/* 
usage: map-get($theme-colors, "dop-disabled-primary");
*/
@font-face {
  font-family: "Graphik Regular";
  src: url("Graphik-Regular-App.ttf");
}
@font-face {
  font-family: "Graphik Semibold";
  src: url("Graphik-Semibold-App.ttf");
}
@font-face {
  font-family: "GraphikWide Light";
  src: url("GraphikWide-Light-App.ttf");
}
@font-face {
  font-family: "GraphikWide Regular";
  src: url("GraphikWide-Regular-App.ttf");
}
@font-face {
  font-family: "GraphikWide Semibold";
  src: url("GraphikWide-Semibold-App.ttf");
}
h1, h2, h3, h4, h5, h6,
body {
  font-family: "GraphikWide Semibold";
}

.fw-bolder {
  color: #051E6E;
  font-size: 20px;
}

.fw-lighter {
  color: #051E6E;
  font-size: 14px;
  font-weight: lighter;
}

.page-headings h2 {
  color: #051E6E;
  margin-top: 0;
}

.page-headings h5 {
  color: #051E6E;
  font-weight: normal;
  font-family: "Graphik Regular";
}
.page-headings a.page-heading-icon {
  padding: 0 5px;
  opacity: 50%;
}
.page-headings a.page-heading-icon.active,
.page-headings a.page-heading-icon:hover {
  color: #051E6E !important;
  opacity: 100%;
}

.text-muted {
  color: #051E6E !important;
  opacity: 50%;
  font-weight: lighter;
}

.text-dark {
  color: #051E6E !important;
  font-weight: bold;
}

.btn {
  border-radius: 250px;
  font-family: "GraphikWide Semibold";
}
.btn span {
  font-family: "GraphikWide Semibold";
}

.btn i {
  padding-right: 6px !important;
}

.btn-primary {
  background-color: #0555FA;
  border-color: #0555FA;
  font-weight: normal;
  color: white;
}
.btn-primary:hover {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA;
  border-color: #0555FA;
}

.btn-secondary {
  background-color: white;
  color: #0555FA;
  border-color: #0555FA !important;
  font-weight: normal;
}
.btn-secondary:hover {
  background-color: transparent !important;
  cursor: pointer !important;
  color: #0555FA !important;
}

.btn-secondary:disabled {
    color: #A19F9D;
    border: 2px solid #A19F9D !important;

}

.btn-danger {
  /*font-weight: 600;*/
  font-weight: normal;
  font-size: 14px;
  padding: 5px 20px 7px 20px;
  background: #ff6e5a;
  border-color: #ff6e5a;
}


@media (max-width: 576px) {
  .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
  }
}


.more-options-dropdown {
  border: none;
  padding: 0;
}

.more-options-dropdown ul {
  list-style-type: none;
  padding: 10px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}


/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 100000; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(236, 240, 244, 0.8);
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.3s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay .overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay .overlay-content img {
  width: 320px;
  height: 320px;
}
@media screen and (min-width: 768px) {
  .overlay .overlay-content img {
    width: 480px;
    height: 480px;
  }
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay.active {
  width: 100%;
}
.overlay.inactive {
  width: 0;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
}
/* Offcanvas */
/* Offcanvas forms */
/* External applications navigation (offcanvas) */
/* offcanvas */
.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  min-width: 50%;
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 24px;
  overflow-y: scroll;
  background-color: white !important;
  z-index: 10000;
}
.offcanvas .offcanvas-color-header,
.offcanvas-lg .offcanvas-color-header,
.offcanvas-md .offcanvas-color-header,
.offcanvas-sm .offcanvas-color-header,
.offcanvas-xl .offcanvas-color-header,
.offcanvas-xxl .offcanvas-color-header {
  background: #0555FA;
  padding: 25px;
  display: flex;
  justify-content: space-between;
}
.offcanvas .offcanvas-color-header .offcanvas-header-icon,
.offcanvas-lg .offcanvas-color-header .offcanvas-header-icon,
.offcanvas-md .offcanvas-color-header .offcanvas-header-icon,
.offcanvas-sm .offcanvas-color-header .offcanvas-header-icon,
.offcanvas-xl .offcanvas-color-header .offcanvas-header-icon,
.offcanvas-xxl .offcanvas-color-header .offcanvas-header-icon {
  font-size: 3rem;
  color: white !important;
  margin-left: 40px;
}
@media (max-width: 575.98px) {
  .offcanvas .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-lg .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-md .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-sm .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-xl .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-xxl .offcanvas-color-header .offcanvas-header-icon {
    font-size: 2rem;
  }
}
@media (max-width: 767.98px) {
  .offcanvas .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-lg .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-md .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-sm .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-xl .offcanvas-color-header .offcanvas-header-icon,
  .offcanvas-xxl .offcanvas-color-header .offcanvas-header-icon {
    font-size: 4rem;
  }
}
.offcanvas .offcanvas-color-header .offcanvas-close-icon,
.offcanvas-lg .offcanvas-color-header .offcanvas-close-icon,
.offcanvas-md .offcanvas-color-header .offcanvas-close-icon,
.offcanvas-sm .offcanvas-color-header .offcanvas-close-icon,
.offcanvas-xl .offcanvas-color-header .offcanvas-close-icon,
.offcanvas-xxl .offcanvas-color-header .offcanvas-close-icon {
  color: white !important;
  cursor: pointer;
}
.offcanvas .offcanvas-header,
.offcanvas-lg .offcanvas-header,
.offcanvas-md .offcanvas-header,
.offcanvas-sm .offcanvas-header,
.offcanvas-xl .offcanvas-header,
.offcanvas-xxl .offcanvas-header {
  padding-bottom: 8px;
  padding-bottom: 14px;
  padding-left: 58px;
  padding-top: 45px;
}
@media (max-width: 575.98px) {
  .offcanvas .offcanvas-header,
  .offcanvas-lg .offcanvas-header,
  .offcanvas-md .offcanvas-header,
  .offcanvas-sm .offcanvas-header,
  .offcanvas-xl .offcanvas-header,
  .offcanvas-xxl .offcanvas-header {
    padding: 15px 15px;
  }
}
@media (max-width: 767.98px) {
  .offcanvas .offcanvas-header,
  .offcanvas-lg .offcanvas-header,
  .offcanvas-md .offcanvas-header,
  .offcanvas-sm .offcanvas-header,
  .offcanvas-xl .offcanvas-header,
  .offcanvas-xxl .offcanvas-header {
    padding: 30px 30px;
  }
}
.offcanvas .offcanvas-header .offcanvas-title,
.offcanvas-lg .offcanvas-header .offcanvas-title,
.offcanvas-md .offcanvas-header .offcanvas-title,
.offcanvas-sm .offcanvas-header .offcanvas-title,
.offcanvas-xl .offcanvas-header .offcanvas-title,
.offcanvas-xxl .offcanvas-header .offcanvas-title {
  font-family: "GraphikWide Semibold";
  color: #051E6E;
  font-size: 14px;
  line-height: 20px;
}
.offcanvas .offcanvas-header h3,
.offcanvas-lg .offcanvas-header h3,
.offcanvas-md .offcanvas-header h3,
.offcanvas-sm .offcanvas-header h3,
.offcanvas-xl .offcanvas-header h3,
.offcanvas-xxl .offcanvas-header h3 {
  color: #051E6E;
  letter-spacing: normal !important;
  text-align: left !important;
}
.offcanvas .offcanvas-header h5,
.offcanvas-lg .offcanvas-header h5,
.offcanvas-md .offcanvas-header h5,
.offcanvas-sm .offcanvas-header h5,
.offcanvas-xl .offcanvas-header h5,
.offcanvas-xxl .offcanvas-header h5 {
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  line-height: 20px;
  color: black;
}
.offcanvas .offcanvas-body,
.offcanvas-lg .offcanvas-body,
.offcanvas-md .offcanvas-body,
.offcanvas-sm .offcanvas-body,
.offcanvas-xl .offcanvas-body,
.offcanvas-xxl .offcanvas-body {
  padding: 0px 60px 60px;
  letter-spacing: normal !important;
  text-align: left !important;
}
@media (max-width: 575.98px) {
  .offcanvas .offcanvas-body,
  .offcanvas-lg .offcanvas-body,
  .offcanvas-md .offcanvas-body,
  .offcanvas-sm .offcanvas-body,
  .offcanvas-xl .offcanvas-body,
  .offcanvas-xxl .offcanvas-body {
    padding: 0px 15px;
  }
}
@media (max-width: 767.98px) {
  .offcanvas .offcanvas-body,
  .offcanvas-lg .offcanvas-body,
  .offcanvas-md .offcanvas-body,
  .offcanvas-sm .offcanvas-body,
  .offcanvas-xl .offcanvas-body,
  .offcanvas-xxl .offcanvas-body {
    padding: 0px 30px;
  }
}
.offcanvas .offcanvas-body form div,
.offcanvas-lg .offcanvas-body form div,
.offcanvas-md .offcanvas-body form div,
.offcanvas-sm .offcanvas-body form div,
.offcanvas-xl .offcanvas-body form div,
.offcanvas-xxl .offcanvas-body form div {
  margin-bottom: 16px;
}
.offcanvas .offcanvas-body .card,
.offcanvas-lg .offcanvas-body .card,
.offcanvas-md .offcanvas-body .card,
.offcanvas-sm .offcanvas-body .card,
.offcanvas-xl .offcanvas-body .card,
.offcanvas-xxl .offcanvas-body .card {
  border: none !important;
  border-radius: 5px !important;
  background: #D9D9D9;
}
.offcanvas .offcanvas-body .card .card-body,
.offcanvas-lg .offcanvas-body .card .card-body,
.offcanvas-md .offcanvas-body .card .card-body,
.offcanvas-sm .offcanvas-body .card .card-body,
.offcanvas-xl .offcanvas-body .card .card-body,
.offcanvas-xxl .offcanvas-body .card .card-body {
  background: #D9D9D9;
  border-radius: 5px !important;
}
.offcanvas .offcanvas-body .offcanvas-label-text,
.offcanvas-lg .offcanvas-body .offcanvas-label-text,
.offcanvas-md .offcanvas-body .offcanvas-label-text,
.offcanvas-sm .offcanvas-body .offcanvas-label-text,
.offcanvas-xl .offcanvas-body .offcanvas-label-text,
.offcanvas-xxl .offcanvas-body .offcanvas-label-text {
  font-family: "Graphik Semibold" !important;
  color: #676767 !important;
  font-size: 12px !important;
}
.offcanvas .offcanvas-body .offcanvas-text,
.offcanvas-lg .offcanvas-body .offcanvas-text,
.offcanvas-md .offcanvas-body .offcanvas-text,
.offcanvas-sm .offcanvas-body .offcanvas-text,
.offcanvas-xl .offcanvas-body .offcanvas-text,
.offcanvas-xxl .offcanvas-body .offcanvas-text {
  font-family: "Graphik Regular" !important;
  color: #676767 !important;
  font-size: 14px !important;
}
.offcanvas .offcanvas-body .text-muted,
.offcanvas-lg .offcanvas-body .text-muted,
.offcanvas-md .offcanvas-body .text-muted,
.offcanvas-sm .offcanvas-body .text-muted,
.offcanvas-xl .offcanvas-body .text-muted,
.offcanvas-xxl .offcanvas-body .text-muted {
  font-family: "Graphik Regular" !important;
  font-size: 12px !important;
}
.offcanvas .offcanvas-body .offCanvasMessageTitle,
.offcanvas-lg .offcanvas-body .offCanvasMessageTitle,
.offcanvas-md .offcanvas-body .offCanvasMessageTitle,
.offcanvas-sm .offcanvas-body .offCanvasMessageTitle,
.offcanvas-xl .offcanvas-body .offCanvasMessageTitle,
.offcanvas-xxl .offcanvas-body .offCanvasMessageTitle {
  font-family: "Graphik Semibold" !important;
  color: #0555FA !important;
  font-size: 12px !important;
}
.offcanvas .offcanvas-body p,
.offcanvas-lg .offcanvas-body p,
.offcanvas-md .offcanvas-body p,
.offcanvas-sm .offcanvas-body p,
.offcanvas-xl .offcanvas-body p,
.offcanvas-xxl .offcanvas-body p {
  font-family: "Graphik Regular" !important;
  color: #051E6E;
  font-size: 16px;
  padding-top: 0px;
  color: #666666;
  line-height: 22px;
  font-size: 14px;
  padding-bottom: 24px;
}
.offcanvas .offcanvas-body label,
.offcanvas-lg .offcanvas-body label,
.offcanvas-md .offcanvas-body label,
.offcanvas-sm .offcanvas-body label,
.offcanvas-xl .offcanvas-body label,
.offcanvas-xxl .offcanvas-body label {
  color: #676767;
  font-family: "Graphik Semibold";
  font-weight: bold;
  font-size: 12px;
  background-color: white !important;
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 0px 4px 0px 4px;
  letter-spacing: normal !important;
}
.offcanvas .offcanvas-body select,
.offcanvas .offcanvas-body option,
.offcanvas .offcanvas-body textarea,
.offcanvas .offcanvas-body input[type=number],
.offcanvas .offcanvas-body input[type=date],
.offcanvas .offcanvas-body input[type=email],
.offcanvas .offcanvas-body input[type=text],
.offcanvas-lg .offcanvas-body select,
.offcanvas-lg .offcanvas-body option,
.offcanvas-lg .offcanvas-body textarea,
.offcanvas-lg .offcanvas-body input[type=number],
.offcanvas-lg .offcanvas-body input[type=date],
.offcanvas-lg .offcanvas-body input[type=email],
.offcanvas-lg .offcanvas-body input[type=text],
.offcanvas-md .offcanvas-body select,
.offcanvas-md .offcanvas-body option,
.offcanvas-md .offcanvas-body textarea,
.offcanvas-md .offcanvas-body input[type=number],
.offcanvas-md .offcanvas-body input[type=date],
.offcanvas-md .offcanvas-body input[type=email],
.offcanvas-md .offcanvas-body input[type=text],
.offcanvas-sm .offcanvas-body select,
.offcanvas-sm .offcanvas-body option,
.offcanvas-sm .offcanvas-body textarea,
.offcanvas-sm .offcanvas-body input[type=number],
.offcanvas-sm .offcanvas-body input[type=date],
.offcanvas-sm .offcanvas-body input[type=email],
.offcanvas-sm .offcanvas-body input[type=text],
.offcanvas-xl .offcanvas-body select,
.offcanvas-xl .offcanvas-body option,
.offcanvas-xl .offcanvas-body textarea,
.offcanvas-xl .offcanvas-body input[type=number],
.offcanvas-xl .offcanvas-body input[type=date],
.offcanvas-xl .offcanvas-body input[type=email],
.offcanvas-xl .offcanvas-body input[type=text],
.offcanvas-xxl .offcanvas-body select,
.offcanvas-xxl .offcanvas-body option,
.offcanvas-xxl .offcanvas-body textarea,
.offcanvas-xxl .offcanvas-body input[type=number],
.offcanvas-xxl .offcanvas-body input[type=date],
.offcanvas-xxl .offcanvas-body input[type=email],
.offcanvas-xxl .offcanvas-body input[type=text] {
  color: black;
  font-family: "Graphik Regular";
  font-size: 16px;
  line-height: unset;
  border-color: rgba(96, 101, 126, 0.4);
  border-radius: 0;
  border-width: 1px;
  width: 100%;
}
.offcanvas .offcanvas-body input[type=date],
.offcanvas-lg .offcanvas-body input[type=date],
.offcanvas-md .offcanvas-body input[type=date],
.offcanvas-sm .offcanvas-body input[type=date],
.offcanvas-xl .offcanvas-body input[type=date],
.offcanvas-xxl .offcanvas-body input[type=date] {
  padding-left: 12px;
}
.offcanvas .offcanvas-body select:disabled,
.offcanvas .offcanvas-body input[type=email]:disabled,
.offcanvas .offcanvas-body input[type=date]:disabled,
.offcanvas .offcanvas-body input[type=text]:disabled,
.offcanvas-lg .offcanvas-body select:disabled,
.offcanvas-lg .offcanvas-body input[type=email]:disabled,
.offcanvas-lg .offcanvas-body input[type=date]:disabled,
.offcanvas-lg .offcanvas-body input[type=text]:disabled,
.offcanvas-md .offcanvas-body select:disabled,
.offcanvas-md .offcanvas-body input[type=email]:disabled,
.offcanvas-md .offcanvas-body input[type=date]:disabled,
.offcanvas-md .offcanvas-body input[type=text]:disabled,
.offcanvas-sm .offcanvas-body select:disabled,
.offcanvas-sm .offcanvas-body input[type=email]:disabled,
.offcanvas-sm .offcanvas-body input[type=date]:disabled,
.offcanvas-sm .offcanvas-body input[type=text]:disabled,
.offcanvas-xl .offcanvas-body select:disabled,
.offcanvas-xl .offcanvas-body input[type=email]:disabled,
.offcanvas-xl .offcanvas-body input[type=date]:disabled,
.offcanvas-xl .offcanvas-body input[type=text]:disabled,
.offcanvas-xxl .offcanvas-body select:disabled,
.offcanvas-xxl .offcanvas-body input[type=email]:disabled,
.offcanvas-xxl .offcanvas-body input[type=date]:disabled,
.offcanvas-xxl .offcanvas-body input[type=text]:disabled {
  color: black;
  background-color: #F5F7F9 !important;
}
.offcanvas .offcanvas-body textarea,
.offcanvas-lg .offcanvas-body textarea,
.offcanvas-md .offcanvas-body textarea,
.offcanvas-sm .offcanvas-body textarea,
.offcanvas-xl .offcanvas-body textarea,
.offcanvas-xxl .offcanvas-body textarea {
  min-height: 7em;
}
.offcanvas .offcanvas-body .input-daterange label,
.offcanvas-lg .offcanvas-body .input-daterange label,
.offcanvas-md .offcanvas-body .input-daterange label,
.offcanvas-sm .offcanvas-body .input-daterange label,
.offcanvas-xl .offcanvas-body .input-daterange label,
.offcanvas-xxl .offcanvas-body .input-daterange label {
  z-index: 99;
}
.offcanvas .offcanvas-body .input-daterange .input-group-addon,
.offcanvas-lg .offcanvas-body .input-daterange .input-group-addon,
.offcanvas-md .offcanvas-body .input-daterange .input-group-addon,
.offcanvas-sm .offcanvas-body .input-daterange .input-group-addon,
.offcanvas-xl .offcanvas-body .input-daterange .input-group-addon,
.offcanvas-xxl .offcanvas-body .input-daterange .input-group-addon {
  background-color: transparent;
  border: none;
  font-family: "Graphik Semibold";
  font-weight: bold;
  font-size: 12px;
  padding-top: 20px;
}
.offcanvas .btn-block,
.offcanvas-lg .btn-block,
.offcanvas-md .btn-block,
.offcanvas-sm .btn-block,
.offcanvas-xl .btn-block,
.offcanvas-xxl .btn-block {
  width: 100%;
}
.offcanvas .alert,
.offcanvas .alert p,
.offcanvas .alert p span,
.offcanvas-lg .alert,
.offcanvas-lg .alert p,
.offcanvas-lg .alert p span,
.offcanvas-md .alert,
.offcanvas-md .alert p,
.offcanvas-md .alert p span,
.offcanvas-sm .alert,
.offcanvas-sm .alert p,
.offcanvas-sm .alert p span,
.offcanvas-xl .alert,
.offcanvas-xl .alert p,
.offcanvas-xl .alert p span,
.offcanvas-xxl .alert,
.offcanvas-xxl .alert p,
.offcanvas-xxl .alert p span {
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  line-height: 20px;
  color: black;
}
.offcanvas .btn-close,
.offcanvas-lg .btn-close,
.offcanvas-md .btn-close,
.offcanvas-sm .btn-close,
.offcanvas-xl .btn-close,
.offcanvas-xxl .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  font-size: 15px;
  color: #231F20;
}

.lighterBg {
  background: #f7f7f7 !important;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi {
  padding-left: 0;
  padding-right: 0;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item {
  background-color: rgba(18, 86, 250, 0.08);
  border: 1px solid rgba(205, 220, 255, 0.3);
  line-height: 56px;
  margin-bottom: 8px;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a {
  margin-left: 0;
  font-family: "GraphikWide Semibold";
  font-size: 14px;
  color: #051E6E;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a img, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a img {
  padding-right: 16px;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a i, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a i {
  color: #051E6E;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover {
  color: #0555FA;
  text-decoration: none;
}

.offcanvas .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-lg .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-md .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-sm .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-xl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i, .offcanvas-xxl .offcanvas-body ul#externalApplicationsNavi li.nav-item a:hover i {
  color: #0555FA;
}

/********************************************************************/
/**************************** CARDS *********************************/
/********************************************************************/
.card-body p.description {
  font-family: "Graphik Regular" !important;
}

/******************************************************************************************/
/*************************   Sidebar Main Navi ********************************************/
/******************************************************************************************/
#sidebarMainNavi2 {
  padding: 24px !important;
  background: white;
  margin-right: 10px;
  border-radius: 8px;
  display: block;
}
#sidebarMainNavi2 ul.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#sidebarMainNavi2 ul.nav li {
  display: block;
}
#sidebarMainNavi2 ul.nav li a {
  padding: 0 12px !important;
  font-size: 0.9em;
  margin-left: 0px;
  border-radius: 8px;
  font-family: "GraphikWide semibold";
  color: #051E6E;

  display: flex;
  gap: 6px;
}
#sidebarMainNavi2 ul.nav li a.active {
  background: #e5e5e5;
}
#sidebarMainNavi2 ul.nav li a i {
  font-size: 1.4em;
}

/******************************************************************************************/
/*************************   Navbar Styles ************************************************/
/******************************************************************************************/
.static-top.navbar-dark {
  background-color: transparent;
  box-shadow: none;
  color: #051E6E;
  padding: 0 30px 0 38px;
}
@media (max-width: 576px) {
  .static-top.navbar-dark {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.navbar-brand {
  padding: 8px;
  padding-left: 0px;
}


.static-top.navbar .menu-bar > .navbar-nav > .divider-vertical {
  height: 25px;
  margin: 10px 4px 0;
  border-color: #fff;
  border-color: #666;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: "Graphik Regular";
  font-style: normal;
  font-size: 12px;
  line-height: 14px;
  color: #051E6E;
  padding-top: 0;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
  text-decoration: none;
  background-color: transparent;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a.focus, .static-top.navbar .menu-bar > .navbar-nav > li > a.show {
  border: none;
  text-decoration: none;
  background-color: transparent;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a.btn {
  color: white;
  font-weight: 800;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a.btn span {
  line-height: 18px;
  padding-left: 2px;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a.btn:hover, .static-top.navbar .menu-bar > .navbar-nav > li > a.btn:active {
  background-color: transparent !important;
  cursor: pointer;
  color: #0555FA !important;
  border-color: #0555FA !important;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a img.account-image {
  box-shadow: 0 0 0 2px rgba(18, 86, 250, 0.24);
  border-radius: 34px;
  vertical-align: top;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info {
  padding-left: 12px;
  display: inline-block;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info .username {
  vertical-align: text-top;
  font-size: 12px !important;
  color: black;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a div.user-info .useraccountname {
  vertical-align: text-bottom;
  color: #051E6E;
  font-family: "Graphik Regular";
  font-size: 15px !important;
  line-height: 22px;
  font-weight: 600 !important;
}

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li.dropdown > a:hover {
  background-color: transparent;
}
.navbar-dark .navbar-nav .show.dropdown-menu {
  background-color: white;
  text-decoration: none;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a {
  color: #051E6E;
  text-decoration: none;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover, .navbar-dark .navbar-nav .show.dropdown-menu > li > a:focus {
  color: #0555FA !important;
  text-decoration: none !important;
  background-color: transparent;
}
.navbar-dark .dropdown-divider {
  border-color: #fff;
  border-color: #666;
}
.navbar-dark a.dropdown-item:hover {
  text-decoration: none;
  background-color: transparent;
}
#navbar .nav-item .dropdown-toggle::after {
  display: none !important;
}

/******************************************************************************************/
/*************************  Notifications  ************************************************/
/******************************************************************************************/
#notificationsButton {
  margin-right: 3px;
}
#notificationsButton #notificationsBell {
  font-size: 22px;
  position: relative;
  color: #1c5efb;
}
#notificationsButton #notificationsButtonBadge {
  display: none;
  position: absolute;
  font-weight: bold;
  font-style: normal;
  top: -2px;
  right: -7px;
  display: block;
  background: #ffffff;
  border: 1px solid blue;
  color: blue;
  box-shadow: 0px 0px 0px 2px #ecf0f4;
  min-width: 16px;
  padding: 1px 2px 3px 2px;
}

#incidentNotificationsList:before {
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  border: 1px solid #c2c6c9;
  border-bottom: 0;
  border-right: 0;
  background: #fff;
  transform: rotate(45deg);
  content: "";
}
#incidentNotificationsList:before li:hover {
  background: rgb(236, 236, 236);
  border-radius: 4px;
}

/******************************************************************************************/
/*************************  Notifications  ************************************************/
/******************************************************************************************/
#offCanvasMainNavigation {
  background-color: #FFFFFF !important;
}
#offCanvasMainNavigation .offcanvas-body {
  padding: 0 24px !important;
}
#offCanvasMainNavigation .offcanvas-body .user-photo {
  display: flex;
  align-items: center;
}
#offCanvasMainNavigation .offcanvas-body .user-photo .user-photo-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 12px;
}
#offCanvasMainNavigation .offcanvas-body .user-photo .user-photo-details {
  display: flex;
  flex-direction: column;
}
#offCanvasMainNavigation .offcanvas-body h3 {
  font-size: 0.7em;
  padding: 0 0 0 10%;
  color: #051E6E;
  font-family: "GraphikWide semibold";
}
#offCanvasMainNavigation .offcanvas-body ul.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#offCanvasMainNavigation .offcanvas-body ul.nav li {
  display: block;
}
#offCanvasMainNavigation .offcanvas-body ul.nav li a {
  font-size: 1.1em;
  font-family: "GraphikWide semibold";
  color: #051E6E;

  display: flex;
  padding: 0 !important;
  gap: 6px;
}
#offCanvasMainNavigation .offcanvas-body ul.nav li a i {
  font-size: 1.35em;
}
#offCanvasMainNavigation .language-button,
#offCanvasMainNavigation .logout-button {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.7rem !important;
  line-height: 1.5 !important;
}

.nav-link {
  font-size: 14px !important;
}
.nav-link span {
  font-size: 10px !important;
}
.nav-link span.badge {
  border-style: solid;
  border-radius: 100px !important;
  border-width: 0.5px !important;
  /*color: #0555FA !important;*/
  /*border-color: #0555FA !important;*/
  padding-left: 5px;
  padding-right: 6px;
  padding-top: 5px;
  padding-bottom: 4px;
  margin-top: -1px;
  margin-left: 10px;
}
.nav-link:hover span.badge {
  color: #0555FA;
  border-color: #0555FA !important;
}
.nav-link:active span.badge {
  color: #0555FA;
  border-color: #0555FA !important;
}

/******************************************************************************************/
/*************************  NavTabs  ******************************************************/
/******************************************************************************************/
.nav {
  --bs-nav-link-padding-x: 32px;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-weight: bolder;
  --bs-nav-link-color: map-get($theme-colors, "dop-disabled-primary");
  --bs-nav-link-hover-color: $mainSecondaryColor;
}

.nav-tabs {
  --bs-nav-tabs-border-width: none !important;
  --bs-nav-tabs-link-active-color: #0555FA;
}
.nav-tabs .nav-link {
  font-size: 14px !important;
  color: #C5C5C5;
}
@media (max-width: 576px) {
  .nav-tabs .nav-link {
    font-size: 0.9em !important;
  }
}
.nav-tabs .nav-link span.badge {
  font-size: 10px !important;
  border-style: solid;
  border-radius: 100px !important;
  border-width: 0.5px !important;
  background-color: transparent !important;
  color: #C5C5C5 !important;
  border-color: #C5C5C5 !important;
  padding-left: 5px;
  padding-right: 6px;
  padding-top: 5px;
  padding-bottom: 4px;
  margin-top: -1px;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .nav-tabs .nav-link span.badge {
    font-size: 9px !important;
  }
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  color: #051E6E !important;
}
.nav-tabs .nav-link:focus span.badge, .nav-tabs .nav-link:hover span.badge {
  color: #051E6E !important;
  border-color: #051E6E !important;
}
.nav-tabs .nav-link.active span.badge {
  color: #0555FA !important;
  border-color: #0555FA !important;
}

.card {
  border: none !important;
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}
.card .card-img,
.card .card-img-top {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
.card .card-body {
  border: none;
}
.card .card-body.card-bg-white {
  padding: 0px !important;
}
.card .card-body h5 a {
  font-family: "GraphikWide Semibold";
  font-size: 20px;
}
.card .card-body h5.card-title {
  font-weight: bold;
  color: #051E6E;
}
.card .card-body p {
  font-family: "GraphikWide Regular";
  font-size: 14px;
}

h5.card-title {
  font-weight: bold;
  color: #051E6E;
}

.card.btn i {
  padding: 0px !important;
}

.form-wrapper .form-section-info h4 {
  font-family: "GraphikWide Regular";
  font-size: 16px;
  color: #051E6E !important;
}
.form-wrapper .form-section-info p {
  font-family: "Graphik Regular";
  font-size: 14px;
  color: #051E6E !important;
  line-height: 22px;
  padding-bottom: 24px;
}
.form-wrapper .form-section-info ul li {
  font-family: "Graphik Regular";
  font-size: 14px;
  color: #051E6E !important;
}
.form-wrapper p.toggle-heading,
.form-wrapper p.toggle-description {
  font-family: "Graphik Semibold";
  font-size: 16px;
  color: black !important;
}
.form-wrapper p.toggle-description {
  font-family: "Graphik Regular";
}
.form-wrapper select.form-select,
.form-wrapper input.form-control {
  border-radius: 0px !important;
}
.form-wrapper .input-group-text {
  background-color: transparent;
  color: #0555FA;
  border-color: #676767;
}
.form-wrapper .input-group-text .form-control input {
  color: #676767;
}
.form-wrapper .form-check-input {
  width: 43px !important;
  height: 24px;
}
.form-wrapper select,
.form-wrapper option,
.form-wrapper input[type=email],
.form-wrapper input[type=password],
.form-wrapper input[type=number],
.form-wrapper input[type=text] {
  font-family: "Graphik Regular";
  font-size: 16px;
  color: black !important;
  line-height: unset;
  border-color: rgba(96, 101, 126, 0.4);
}
.form-wrapper select:disabled,
.form-wrapper input[type=email]:disabled,
.form-wrapper input[type=text]:disabled:disabled {
  color: black;
  background-color: #F5F7F9 !important;
}
.form-wrapper label {
  font-family: "Graphik Semibold";
  font-size: 12px;
  color: #676767 !important;
  font-weight: bold;
  background-color: white;
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 0 4px;
}
.case-attachments-uploader {
  font-family: "Graphik Regular";
  font-size: 16px;
  color: black !important;
  line-height: 40px;
  line-height: 18px;
}
.case-attachments-uploader .dropzone {
  color: black;
  border-color: rgba(96, 101, 126, 0.4) !important;
  border-radius: 0px !important;
  border-style: dotted !important;
}
.case-attachments-uploader p {
  color: black !important;
  font-size: 16px !important;
}
.case-attachments-uploader p a {
  color: #0555FA;
  font-size: 16px !important;
}
.case-attachments-uploader p.info {
  color: rgba(102, 102, 102, 0.8) !important;
  font-size: 12px !important;
}
.case-attachments-uploader .incidentFilesContainer ul,
.case-attachments-uploader .userFilesContainer ul {
  margin: 0;
  padding: 0;
  list-style: none !important;
}
.case-attachments-uploader .incidentFilesContainer ul li,
.case-attachments-uploader .userFilesContainer ul li {
  list-style-type: none !important;
  border: 1px solid #ebf0f5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 2px;
  margin: 5px 0 0;
}
.case-attachments-uploader .incidentFilesContainer ul li a,
.case-attachments-uploader .userFilesContainer ul li a {
  color: #051E6E !important;
  text-decoration: underline !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.case-attachments-uploader .incidentFilesContainer ul li span.case-attachments-info,
.case-attachments-uploader .userFilesContainer ul li span.case-attachments-info {
  color: rgba(102, 102, 102, 0.8) !important;
  font-size: 11px !important;
}
.case-attachments-uploader.isLoading .refreshBtn,
.case-attachments-uploader.isLoading .content {
  display: none;
}
.case-attachments-uploader.isLoading .loading-spinner {
  display: block;
}
.case-attachments-uploader.isDisplay .refreshBtn,
.case-attachments-uploader.isDisplay .content {
  display: block;
}
.case-attachments-uploader.isDisplay .loading-spinner {
  display: none;
}
#caseDetailsInfoContents pre {
  font-family: "Graphik Regular" !important;
  font-size: 14px !important;
}
.case-details-timeline {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.case-details-timeline li {
  list-style: none !important;
}
.case-details-timeline li .portal-comment-icon div.offcanvas-text,
.case-details-timeline li .portal-comment-icon p.offcanvas-text {
  font-family: "Graphik Regular" !important;
  font-size: 12px !important;
  font-weight: bold;
}
.case-details-timeline li .portal-comment-icon p.offcanvas-text.date {
  font-weight: normal !important;
}
.case-details-timeline li .portal-comment-icon p i {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
}
.case-details-timeline li .portal-comment-icon.text-muted {
  font-weight: normal;
}

.badge {
  font-size: 12px;
}
.badge.status-0, .badge.status-new {
  background-color: #EBF2F8;
  color: #054B90;
}
.badge.status-LMSADMIN, .badge.status-930650003, .badge.status-inprogress, .badge.status-shipped {
  background-color: #F8F7EB;
  color: #936A00;
  font-family: Sans-Serif;
}
.badge.status-1, .badge.status-Basic, .badge.status-LMS, .badge.status-done {
  background-color: #EDF9F1;
  color: #146A17;
}
.badge.status-2 {
  background-color: #EDF9F1;
  color: #ff6e5a;
}
.badge.inline {
  float: none;
}
.badge.badge-checked {
  background-color: white;
  color: #051E6E;
  border: 1px solid #EBF2F8;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px;
}
.dot.status-0, .dot.status-LMS, .dot.status-new {
  background-color: #054B90;
}
.dot.status-LMSADMIN, .dot.status-930650003, .dot.status-inprogress, .dot.status-shipped {
  background-color: #936A00;
}
.dot.status-1, .dot.status-Basic, .dot.status-done {
  background-color: #146A17;
}
.dot.status-2 {
  background-color: #ff6e5a;
}

table.table.dataTable {
  margin-top: 14px !important;
}

tbody, td, tfoot, th, thead, tr {
  font-family: "Graphik Regular";
  border-color: inherit;
  border-style: solid;
  border-top: none;
  border-width: 0;
  border-left: none;
  border-right: none;
  color: #242424;
  padding-bottom: 10px !important;
  font-weight: 100 !important;
  border-color: #EFEFEF;
}

tbody.bootstrap-table tr:hover {
  background-color: #0555FA;
  color: white;
}

thead {
  font-size: 14px;
  font-weight: 100 !important;
  color: #242424;
}

th:hover {
  color: #0555FA;
}

tbody td span {
  font-family: "Graphik Regular";
  font-size: 14px;
}

tbody td a {
  color: #242424;
  font-family: "Graphik Regular";
}

tbody td .gallery-list-item .gallery-list-item-info,
tbody td .gallery-list-item {
  display: flex;
  align-items: center;
}

tbody td .gallery-list-item .gallery-list-item-info {
  flex-direction: column;
  padding-left: 1em;
}

tbody td .gallery-list-item a.heading {
  font-size: 14px;
  color: #242424;
  font-family: "Graphik Semibold";
  font-weight: bold;
}

tbody td .gallery-list-item a.subheading {
  font-size: 14px;
  color: #C5C5C5;
  font-family: "GraphikWide Light";
  font-weight: normal;
}

.bootstrap-table .fixed-table-container .table thead th {
  padding-left: 23px;
  color: #242424;
  column-width: auto;
}

.table > :not(caption) > * > * {
  padding-left: 23px;
}

.dt-column-title {
  text-align: left!important;
}

.bootstrap-table .fixed-table-container .table tbody td .btn-default {
  padding-left: 10px;
  color: #242424;
  column-width: 200px;
  background-color: transparent;
  border-width: 0px;
}

.bootstrap-table .fixed-table-container .table td,
.bootstrap-table .fixed-table-container .table th {
  line-height: 25px;
}

@media (max-width: 576px) {
  .custom-search-container div.dt-search {
    text-align: left;
  }
  .custom-search-container div.dt-search label {
    max-width: 20%;
  }
  .custom-search-container div.dt-search input {
    width: 80%;
  }
}
body {
  background-color: #ECF0F4;
}

#mainContent {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 60px;
  background: white;
  padding: 3%;
  border-radius: 0.5rem;
}
#mainContent .page-top-color-header {
  background: linear-gradient(180deg,#9dfbaa,#71f1de);;
  padding: 25px;
  display: flex;
  justify-content: space-between;
}
#mainContent .page-top-color-header.blue {
  background-color: #0555FA;
  color: white;
}
#mainContent .page-top-color-header.blue h1,
#mainContent .page-top-color-header.blue p {
  color: #061e6e !important;
}
#mainContent .page-top-color-header .header-icon {
  font-size: 3rem;
  color: white;
  margin-left: 40px;
}

.vr {
  margin-left: 5px;
  margin-right: 5px;
  height: 14px;
  color: black;
}

.bg-doppelmayr-primary {
  background-color: #0555FA;
  color: white;
}
.bg-doppelmayr-primary h5 {
  color: white;
  font-family: "GraphikWide Regular";
  font-size: 14px;
}
.bg-doppelmayr-primary p {
  color: white;
  font-family: "Graphik Regular";
  font-size: 0.75em !important;
}

.pointer {
  cursor: pointer;
}

.user-hero {
  display: flex;
  align-items: center;
}
.user-hero .user-hero-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 0.75em;
}
.user-hero .user-hero-details {
  display: flex;
  flex-direction: column;
}
.user-hero .user-hero-details .fw-bolder {
  color: #051E6E;
  font-size: 1.25em !important;
}
.user-hero .user-hero-details .fw-lighter {
  color: #051E6E;
  font-size: 0.75em !important;
  font-weight: lighter;
}
.user-hero .user-photo {
  display: flex;
  align-items: center;
}
.user-hero .user-photo .user-photo-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 0.75em;
}
.user-hero .user-photo .user-photo-details {
  display: flex;
  flex-direction: column;
}
.page-headings {
  margin-bottom:3rem;
}

@media only screen and (max-width: 576px) {
  /* body { */
    /*background: none !important;*/
  /* } */
  .navbar-dark {
    padding-left: 25px !important;
    padding-right: 15px !important;
  }
  #assetlist-tab,
  #assetsgrid-tab {
    display: none;
  }

  #userFiltersTabsWrapper, #casesFilterTabsWrapper {
    overflow:auto;    
   }

  #userFiltersTabs, #casesFilter {     
    padding-top: 1px;overflow-x: auto;
    width: max-content;
    overflow-y: hidden;
    border-bottom: 0 !important;
  }

  #mainContent .dt-length {
    display:none;
  }

  .clip-text-mobile {
    width:100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

  }

  .btn {
    border-radius: 20px !important;
  }
  .btn-danger{
    font-weight: 400 !important;
  }
  .bookmark i {
    color: #0555fa !important;
  }
  .btn span {
    font-size: 0.8rem;
    padding: 10px 10px;
    font-family: "GraphikWide Semibold";
  }
  /*
  .sectionBlockLayout {
    display: none !important;
  }
    */
  #pageWrapper {
    padding: 10px 10px 10px 10px !important;
  }
  #assetsDatatable {
    width: 105% !important;
  }
  /* h2 {
    margin-left: 12px;
    font-size: 18px !important;
  } */
  .gallery-list-item img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 5px;
  }
  .dt-search label {
    display: none;
  }
  [id^=dt-search-] {
    /*#dt-search-1 {*/
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzQ0ODUiICAgdmlld0JveD0iMCAwIDIxLjk5OTk5OSAyMS45OTk5OTkiICAgaGVpZ2h0PSIyMiIgICB3aWR0aD0iMjIiPiAgPGRlZnMgICAgIGlkPSJkZWZzNDQ4NyIgLz4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhNDQ5MCI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xMDMwLjM2MjIpIiAgICAgaWQ9ImxheWVyMSI+ICAgIDxnICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuNSIgICAgICAgaWQ9ImcxNyIgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAuNCw4NjYuMjQxMzQpIj4gICAgICA8cGF0aCAgICAgICAgIGlkPSJwYXRoMTkiICAgICAgICAgZD0ibSAtNTAuNSwxNzkuMSBjIC0yLjcsMCAtNC45LC0yLjIgLTQuOSwtNC45IDAsLTIuNyAyLjIsLTQuOSA0LjksLTQuOSAyLjcsMCA0LjksMi4yIDQuOSw0LjkgMCwyLjcgLTIuMiw0LjkgLTQuOSw0LjkgeiBtIDAsLTguOCBjIC0yLjIsMCAtMy45LDEuNyAtMy45LDMuOSAwLDIuMiAxLjcsMy45IDMuOSwzLjkgMi4yLDAgMy45LC0xLjcgMy45LC0zLjkgMCwtMi4yIC0xLjcsLTMuOSAtMy45LC0zLjkgeiIgICAgICAgICBjbGFzcz0ic3Q0IiAvPiAgICAgIDxyZWN0ICAgICAgICAgaWQ9InJlY3QyMSIgICAgICAgICBoZWlnaHQ9IjUiICAgICAgICAgd2lkdGg9IjAuODk5OTk5OTgiICAgICAgICAgY2xhc3M9InN0NCIgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjY5NjQsLTAuNzE3NiwwLjcxNzYsMC42OTY0LC0xNDIuMzkzOCwyMS41MDE1KSIgICAgICAgICB5PSIxNzYuNjAwMDEiICAgICAgICAgeD0iLTQ2LjIwMDAwMSIgLz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: 15px 6px !important;
    padding: 0.5rem 1rem;
    padding-left: 40px;
    margin-left: 0!important;
    width: 100% !important;
    border-color: rgba(96, 101, 126, 0.4) !important;
    font-family: "GraphikWide Regular" !important;
  }
  tbody td .gallery-list-item .gallery-list-item-info,
  tbody td .gallery-list-item {
    align-items: flex-start !important;
  }
  tbody td .gallery-list-item .subheading {
    opacity: 0.5;
  }
  .page-headings {
    border-top: 1px solid #f1f3f7;
    padding-top: 20px;
    margin-bottom: 2rem !important;
  }
  .table > :not(caption) > * > * {
    padding-left: 0px !important;
  }
  .table > :not(caption) > * > * {
    border-bottom-width: 0px !important;
  }
  .page-top-color-header .header-icon {
    display: none;
  }
  .page-top-color-header .header-info {
    margin-left: 0px !important;
  }
  #ropewayAssistantButton {
    font-size:0.8rem !important;
  }
  #moreActionMenuButton span {
    display:none;
  }
  #assetTickets {padding:0;}
  #assetTicketsTable {width:95%;}
  #assetTicketsTable .align-middle {padding:8px 0 !important;margin:0 !important;}
  #assetTicketsTable thead {background:#F1F3F7 !important}
  #assetTicketsTable  .badge {width:23px;color:rgba(0,0,0,0) !important}
  #assetTicketsTable  tr > th:nth-child(1) > div > div {color:rgba(0,0,0,0) !important}
  #assetTicketsTable  tr > th:nth-child(1)  {width:1px !important;}
  #assetTicketsTable  tr > th:nth-child(1) > div {width:1px !important;}
  #assetTicketsTable  tr > th:nth-child(3) {display:none !important}
  #assetTicketsTable  tr > th:nth-child(5) {display:none !important}
  #assetTicketsTable tr > td:nth-child(3) {display:none !important}
  #assetTicketsTable  tr > td:nth-child(5) {display:none !important}

  #assetTicketsTable  tr > td:nth-child(2) .table-cell-content {
    width:120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }


  #mainContent .dt-length {
    display:none;
  }

  #casesOverviewDatatable {width:95%;  table-layout: unset;}
  #casesOverviewDatatable .align-middle {padding:0 !important;margin:0 !important;}
  
  #casesOverviewDatatable thead {background:#F1F3F7 !important}
  #casesOverviewDatatable .dt-column-order {display:none !important}


  #casesOverviewDatatable  .badge {width:23px;color:rgba(0,0,0,0) !important}
  #casesOverviewDatatable  tr > th:nth-child(1) > div > div {color:rgba(0,0,0,0) !important}

  #teamSettingsAdministration {margin-left:10px}
  #teamSettingsAdministration thead {background:#F1F3F7 !important}
  #teamSettingsAdministration  tr > th {padding-left:15px !important}
  #teamSettingsAdministration  tr > th:nth-child(1) > div > div {color:rgba(0,0,0,0) !important}
  

  #offCanvasAddTeamMember .col-9 {
    width:100%;
  }

  #offCanvasAddTeamMember button {
    zoom:1.6;
  }

  #offCanvasAddTeamMember .offcanvas-color-header {
      padding:25px 25px 0 0;
  }
}

label[for=dt-search-1] {
  display:none;
}

/*
.sectionBlockLayout {
  display:none !important;
}
*/

#assetsDatatable tr:hover {
  background:#F1F3F7;
}

.clip-text {
  max-width: 14vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.clip-text2 {
  width:120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#pageWrapper .nav-item a:hover {
  text-decoration:none;
}

.float-left {
  float:left;
}

.addFavorite i {
  color:#0555fa !important;
}

.MONOCABLE{
  background:#C38C00 !important;
}
.AERIAL{
  background:#054B90 !important;
}
.CHAIRLIFT{
  background:#146A17 !important;
}

.dateFont {
  font-size:0.85em !important;
}

.btn:focus, .btn:focus-visible {
  outline: unset !important;
}

.btn-secondary:focus, .btn-secondary:focus-visible {
  color:#0555FA !important;
}

.toolbarBg {
  background:white;
}

.assetTicketSearch {
  width: 185px;
  float: right;
  margin-bottom: 14px;
}

@media (max-width: 576px) {
  .assetTicketSearch {
    width: 100%;
  }
}

.bg-doppelmayr-dark {
  background-color: #051f6e;
}